<template>
  <div class="app-container">
    <div class="filter-container">
      <el-input v-model="listQuery.courseName" placeholder="课程名称" style="width: 200px;" class="filter-item" @keyup.enter.native="handleFilter" />
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleProfessor">
        教授账户
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :header-cell-style="{background:'#ccc',color:'black'}"
      :data="list"
      border
      stripe
      fit
      highlight-current-row
      style="width: 100%;"
    >
      <el-table-column label="用户ID" align="center">
        <template slot-scope="{row}">
          <span>{{ row.id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="学号" align="center">
        <template slot-scope="{row}">
          <span>{{ row.number }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名" align="center">
        <template slot-scope="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="班级" align="center">
        <template slot-scope="{row}">
          <span>{{ row.schoolClassInfo.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="组别" align="center">
        <template slot-scope="{row}">
          <span v-if="Number(row.courseTimetableUserInfo.type) === 2">调出</span>
          <span v-else>{{ row.courseTimetableUserInfo.group }}</span>
        </template>
      </el-table-column>
      <el-table-column label="作业状态" align="center">
        <template slot-scope="{row}">
          <span v-if="JSON.stringify(row.commit) === '[]'">未提交</span>
          <span v-else>{{ commitStatusOptions[row.commit.commit_status] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="提交时间" align="center">
        <template slot-scope="{row}">
          <span>{{ row.commit.created_at }}</span>
        </template>
      </el-table-column>
      <el-table-column label="作业文件" align="center">
        <template slot-scope="{row}">
          <span v-if="JSON.stringify(row.commit) !== '[]'"><a :href="returnImageUrl(row.url)" target="_blank" rel="noopener">预览</a></span>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
      <el-form ref="dataForm" :rules="rules" :model="tempProfessor" label-position="left" label-width="110px" style="width: 400px; margin-left:50px;">
        <el-form-item label="账号" prop="school_email">
          <label>{{ tempProfessor.school_email }}</label>
        </el-form-item>
        <el-form-item label="密码" prop="professor_password">
          <label>{{ tempProfessor.professor_password }}</label>
        </el-form-item>
        <el-form-item label="链接">
          <label>{{ loginUrl() }}</label>
        </el-form-item>
        <el-form-item label="停用日期" prop="is_allow_login_time">
          <div class="block">
            <el-date-picker
              v-model="tempProfessor.is_allow_login_time"
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="停用日期"
            />
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="updateProfessorAccount">
          确定
        </el-button>
        <el-button type="success" @click="createProfessorAccount">
          重新生成教授账户
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { teacherHomeworkCommitPage, teacherHomeworkGetProfessorInfo, teacherHomeworkCreateProfessor } from '@/api/homework'

import waves from '@/directive/waves' // waves directive
import { listQueryFilter, getFileUrl, notifySuccess } from '@/utils/tool'
import { userUpdate } from '@/api/user'

export default {
  name: 'HomeworkTeacher',
  components: { },
  directives: { waves },
  data() {
    return {
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        homeworkId: this.$route.query.homeworkId
      },
      kaoqinIsPassOptions: { 0: '不合格', 1: '合格' },
      homeworkTypeOptions: { 1: '个人作业', 2: '班级小组作业' },
      commitStatusOptions: { 0: '未提交', 1: '已提交', 2: '已打回' },
      temp: {
        homeworkId: this.$route.query.homeworkId,
        id: '',
        commit_status: ''
      },
      tempProfessor: {
        homeworkId: this.$route.query.homeworkId,
        school_email: '',
        professor_id: '',
        professor_password: '',
        is_allow_login_time: null
      },
      dialogFormVisible: false,
      dialogStatus: '',
      textMap: {
        professor: '教授账户'
      },
      rules: {
        url: [{ required: true, message: '作业地址必填', trigger: 'change' }]
      },
      uploadName: 'UpLoadPdf',
      downloadLoading: false
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      this.listQuery = listQueryFilter(this.listQuery)
      teacherHomeworkCommitPage(this.listQuery).then(response => {
        this.list = response.data
        this.total = response.page
        this.listLoading = false
      })
    },
    handleFilter() {
      this.getList()
    },
    // 获取教授账户
    handleProfessor() {
      this.dialogStatus = 'professor'
      this.dialogFormVisible = true
      this.tempProfessor.is_allow_login_time = ''
      this.tempProfessor.professor_id = ''
      this.tempProfessor.school_email = ''
      this.tempProfessor.professor_password = ''
      teacherHomeworkGetProfessorInfo(this.listQuery).then(response => {
        this.tempProfessor.is_allow_login_time = response.data.userInfo.is_allow_login_time
        this.tempProfessor.professor_id = response.data.professor_id
        this.tempProfessor.school_email = response.data.userInfo.school_email
        this.tempProfessor.professor_password = response.data.professor_password
        this.listLoading = false
      })
    },
    // 修改教授账户信息,其实就是修改教授用户
    updateProfessorAccount() {
      if (this.tempProfessor.professor_id === '') {
        notifySuccess(this, '教授账户不存在,请重新生成教授账户')
        return
      }
      userUpdate({ id: this.tempProfessor.professor_id, is_allow_login_time: this.tempProfessor.is_allow_login_time }).then(() => {
        this.dialogFormVisible = false
        notifySuccess(this, '修改成功')
        this.getList()
      })
    },
    // 创建教授账户
    createProfessorAccount() {
      teacherHomeworkCreateProfessor({ homeworkId: this.tempProfessor.homeworkId }).then(response => {
        this.tempProfessor.is_allow_login_time = response.data.userInfo.is_allow_login_time
        this.tempProfessor.professor_id = response.data.professor_id
        this.tempProfessor.school_email = response.data.userInfo.school_email
        this.tempProfessor.professor_password = response.data.professor_password
        notifySuccess(this, '生成教授账户成功')
      })
    },
    returnImageUrl(url) {
      return getFileUrl(url)
    },
    loginUrl() {
      return window.document.location.host
    }
  }
}
</script>
